<template>
  <div id="hard" style="height: 300px"></div>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      const hard = echarts.init(document.getElementById("hard"));
     
      hard.setOption({
        color:["#da515b","#42a78e"], 
        tooltip: {
          trigger: "item",
          formatter: ({data})=>{
            return `${data.value}%`
          }
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "硬盘占用率",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show:false,
            },
            data: [
              { value: 70, name: "已使用" },
              { value: 30, name: "未使用" },
            ],
          },
        ],
      });
        window.onresize=()=>{
          hard.resize();
      }
    });
  },
};
</script>

<style>
</style>